<template>
	<view>
		<div class="loader">
			<div class="cell d-0"></div>
			<div class="cell d-1"></div>
			<div class="cell d-2"></div>

			<div class="cell d-1"></div>
			<div class="cell d-2"></div>


			<div class="cell d-2"></div>
			<div class="cell d-3"></div>


			<div class="cell d-3"></div>
			<div class="cell d-4"></div>


		</div>
		<text class="login-success">登录成功</text>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.loader {
		--cell-size: 52px;
		--cell-spacing: 1px;
		--cells: 3;
		--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
		display: flex;
		flex-wrap: wrap;
		width: var(--total-size);
		height: var(--total-size);
		position: absolute;
		/* 设置绝对定位 */
		top: 30%;
		/* 设置顶部位置为视口高度的一半 */
		left: 50%;
		/* 设置左侧位置为视口宽度的一半 */
		transform: translate(-50%, -50%);
		/* 使用变换来居中元素 */
	}

	.cell {
		flex: 0 0 var(--cell-size);
		margin: var(--cell-spacing);
		background-color: transparent;
		box-sizing: border-box;
		border-radius: 4px;
		animation: 1.5s ripple ease infinite;
	}

	.cell.d-1 {
		animation-delay: 100ms;
	}

	.cell.d-2 {
		animation-delay: 200ms;
	}

	.cell.d-3 {
		animation-delay: 300ms;
	}

	.cell.d-4 {
		animation-delay: 400ms;
	}

	.cell:nth-child(1) {
		--cell-color: #00FF87;
	}

	.cell:nth-child(2) {
		--cell-color: #0CFD95;
	}

	.cell:nth-child(3) {
		--cell-color: #17FBA2;
	}

	.cell:nth-child(4) {
		--cell-color: #23F9B2;
	}

	.cell:nth-child(5) {
		--cell-color: #30F7C3;
	}

	.cell:nth-child(6) {
		--cell-color: #3DF5D4;
	}

	.cell:nth-child(7) {
		--cell-color: #45F4DE;
	}

	.cell:nth-child(8) {
		--cell-color: #53F1F0;
	}

	.cell:nth-child(9) {
		--cell-color: #60EFFF;
	}

	/*Animation*/
	@keyframes ripple {
		0% {
			background-color: transparent;
		}

		30% {
			background-color: var(--cell-color);
		}

		60% {
			background-color: transparent;
		}

		100% {
			background-color: transparent;
		}
	}


	/* 其他样式保持不变 */

	/* 添加的“成功登录”文本样式 */
	.login-success {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 20px;
		/* 适中的字体大小 */
		font-weight: 500;
		/* 中等字体粗细，增加文本的稳定性 */
		color: #333;
		/* 深灰色文本，与白色背景形成对比 */
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		/* 轻微的文本阴影，增加立体感 */
		background: #f0f0f0;
		/* 浅灰色背景，与白色背景融合 */
		padding: 10px 20px;
		/* 文本的内边距 */
		border-radius: 5px;
		/* 圆角边框 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 文本的阴影效果 */
		z-index: 10;
		white-space: nowrap;
		/* 防止文本换行 */
		animation: fadeInOut 2s ease-in-out;
	}

	/* 动画定义 */
	@keyframes fadeInOut {

		0%,
		100% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.9);
		}

		50% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}
	}
</style>